<template>
	<div id="MyFollow">
		<x-header :left-options="{showBack: false}" class="header vux-1px-b" title="我的关注">
			<a slot="left"><i class="tp-icon icon-black-back" onclick="javascript:history.back(-1);"> </i></a>
		</x-header>
		<ul>
			<li v-for="item in followList">
				<router-link :to="'/shop/id/' + item.shop_id">
					<img :src="'/los/uploads/thumb/shop/' + item.shop.shop_id + '_98X98.jpeg'" alt="" class="thumb" />
					<div class="desc">
						<div class="title-bar">
							<p class="name">{{item.shop.shop_name}}</p>
							<p class="cert">
								<img src="../assets/images/home/icon_cret.png" alt="" />
								<span>已认证</span>
							</p>
						</div>
						<p class="auction">拍品 : <span>{{item.auction_cout}}</span>粉丝 : <span>{{item.shop.shop_follow_num}}</span></p>
					</div>
				</router-link>
				<div v-if="item.follow_state == 1" class="atten" @click="shopConcern(item.shop.shop_id)">已关注</div>
				<div v-else @click="shopConcern(item.shop.shop_id)" class="reatten">+ 关注</div>
			</li>
		</ul>
		<toast v-model="success" type="text" width="2.8rem">{{msg}}</toast>
	</div>
</template>

<script>
	import axios from 'axios'
	import $ from 'jquery'
	import { XHeader, Toast } from 'vux'
	export default {
		data() {
			return {
				followList: [],
				success: false,
				msg: ''
			}
		},
		components: {
			XHeader,
			Toast
		},
		created() {
			this.getMyFollow();
		},
		methods: {
			getMyFollow: function() {
				let _this = this;
				let more = true;
				var page = 1;
				this.$http({
					method: 'GET',
					url: '/los/api/buyer/shop_follow.json',
					data: ''
				}).then((result) => {
					this.followList = result.data.data;
					console.log(this.followList);
				}).catch((err) => {

				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/buyer/shop_follow.json' + '?page=' + page).then(function(result) {
								$.each(result.data.data, function(index, val) {
									_this.followList.push(val);
								});
								more = true;
								if(result.data.code == 0) {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})

			},
			//点击店铺关注
			shopConcern: function(shop_id) {
				this.$http({
					method: 'POST',
					url: '/los/api/shop/follow.json?shop_id=' + shop_id,
					data: ''
				}).then((result) => {
					console.log(result);
					this.$nextTick(() => {
						this.getMyFollow();
					})
					this.success = !this.success;
					this.msg = result.data.msg;
				}).catch((err) => {
					console.log(err);
				})
			},
		}
	}
</script>

<style scoped>
	#MyFollow {
		background: #fff;
	}
	
	.header {
		background: #fff;
	}
	
	#MyFollow ul {
		position: relative;
	}
	
	#MyFollow ul li {
		padding: 0.32rem 0;
		margin: 0 0.26rem;
		overflow: hidden;
		position: relative;
	}
	
	#MyFollow ul li:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 200%;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}
	
	#MyFollow ul li:last-child:after {
		border: none;
	}
	
	#MyFollow ul li .thumb {
		float: left;
		width: 1.33rem;
		height: 1.33rem;
		border-radius: 0.1rem;
	}
	
	#MyFollow ul li .desc {
		float: left;
		width: 6.13rem;
		overflow: hidden;
		margin: 0.13rem 0 0.13rem 0.26rem;
	}
	
	#MyFollow ul li .title-bar {
		width: 6.13rem;
		height: 0.53rem;
		line-height: 0.53rem;
	}
	
	#MyFollow ul li .desc .name {
		float: left;
		font-size: 0.4rem;
		color: #333;
	}
	
	#MyFollow ul li .desc .cert {
		float: left;
	}
	
	#MyFollow ul li .desc .cert img {
		width: 0.32rem;
		height: 0.32rem;
		margin-left: 0.26rem;
	}
	
	#MyFollow ul li .desc .cert span {
		color: #d58e26;
		font-size: 0.32rem;
	}
	
	#MyFollow ul li .desc .auction {
		float: left;
		margin-top: 0.22rem;
		color: #777;
		font-size: 0.32rem;
		width: 100%;
	}
	
	#MyFollow ul li .desc .auction span {
		color: #333;
		font-size: 0.34rem;
		margin-right: 1.3rem;
	}
	
	#MyFollow ul li .atten {
		position: absolute;
		right: 0;
		top: 40%;
		font-size: 0.34rem;
		color: #777;
		border: solid 1px #e6e6e6;
		width: 1.65rem;
		height: 0.58rem;
		border-radius: 0.29rem;
		text-align: center;
		line-height: 0.58rem;
	}
	
	#MyFollow ul li .reatten {
		position: absolute;
		right: 0;
		top: 40%;
		font-size: 0.34rem;
		color: #a30000;
		border: solid 1px #a30000;
		width: 1.65rem;
		height: 0.58rem;
		border-radius: 0.29rem;
		text-align: center;
		line-height: 0.58rem;
	}
</style>